<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Cuentas</title>
            </f:facet>
        </h:head>

        <h:body style="text-align: center">

            <p:layout fullPage="true">

                  <p:layoutUnit position="south" size="300" closable="true" collapsible="true">
                        <p:chart type="bar"  model="#{cuentasVista.horizontalBarModel}" style="height:300px" />
                    </p:layoutUnit>
                          
                
                <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
                    
                </p:layoutUnit>

                <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                    
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175" header="Left" collapsible="true">
                    <h:form>
                  
                        </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    Cuentas
                    <h:form id="forma">
                        <p:growl id="growl" showDetail="true" sticky="true"/>
                        <p:messages id="mensajes" showDetail="true"/>
                        <p:panel id="campos">
                            <div align="center">
                            <p:panelGrid>
                                <p:row>
                                    <p:column>
                                        <h:outputText value="Numero: "/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText id="txtNumeroCuenta" binding="#{cuentasVista.txtNumeroCuenta}"/>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Cedula Cliente: "/>
                                    </p:column>
                                    <p:column>
                                        <p:selectOneMenu id="cmbClientes" binding="#{cuentasVista.cmbClientes}">
                                            <f:selectItem itemLabel="Seleccione" itemValue="Seleccione"/>
                                            <f:selectItems value="#{cuentasVista.itemsClientes}"/>
                                        </p:selectOneMenu>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Saldo: "/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText id="txtSaldoCuenta" binding="#{cuentasVista.txtSaldoCuenta}"/>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column>
                                        <h:outputText value="Estado Cuenta: "/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText id="txtEstadoCuenta" binding="#{cuentasVista.txtEstadoCuenta}"/>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Clave:  "/>
                                    </p:column>
                                    <p:column>
                                        <p:password id="txtClaveCuenta" binding="#{cuentasVista.txtClaveCuenta}" feedback="true"/>
                                    </p:column>
                                  </p:row>
                            </p:panelGrid>
                                </div>
                            <div align="center">
                            <p:panelGrid>
                                <p:row>
                                    <p:column>
                                        <p:commandButton id="btnRegistrar" value="Registrar" binding="#{cuentasVista.btnRegistrar}" action="#{cuentasVista.funcion_registrar}" update=":forma:campos, :forma:mensajes, :forma:tabla"/>
                                    </p:column>
                                    <p:column>
                                        <p:commandButton id="btnModificar" value="Modificar" binding="#{cuentasVista.btnModificar}" action="#{cuentasVista.funcion_modificar}" update=":forma:campos, :forma:mensajes, :forma:tabla"/>
                                    </p:column>
                                    <p:column>
                                        <p:commandButton id="btnEliminar" disabled="true" value="Eliminar" binding="#{cuentasVista.btnEliminar}" action="#{cuentasVista.funcion_eliminar}" update=":forma:campos, :forma:mensajes, :forma:tabla" >  
                                            <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert" />
                                        </p:commandButton>
                                        
                                    </p:column>
                                    <p:column>
                                        <p:commandButton id="btnLimpiar" value="Limpiar" binding="#{cuentasVista.btnLimpiar}" action="#{cuentasVista.funcion_limpiar}" update=":forma:campos, :forma:mensajes, :forma:tabla"/>
                                    </p:column>
                                    
                                </p:row>
                            </p:panelGrid>
                                </div>
                        </p:panel>
                        <p:panel id="tabla">
                            <p:dataTable var="listaCuentas" value="#{cuentasVista.listaCuentas}" rows="10"
                                         paginator="true"
                                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                         rowsPerPageTemplate="5,10,15"
                                         filteredValue="#{cuentasVista.listaCuentas}"
                                         emptyMessage="No se encontraron resultados"
                                         selectionMode="single" selection="#{cuentasVista.selectCuentas}" rowKey="#{listaCuentas.cueNumero}"
                                         >
                                <p:ajax event="rowSelect" listener="#{cuentasVista.funcion_seleccionar}" update=":forma:campos" />
                                <p:column headerText="Numero Cuenta ">
                                    <h:outputText value="#{listaCuentas.cueNumero}" />
                                </p:column>

                                <p:column headerText="Cliente" filterBy="#{listaCuentas.cliCedula}"
                                          filterMatchMode="contains">
                                    <h:outputText value="#{listaCuentas.cliCedula.cliNombre}" />
                                </p:column>

                                <p:column headerText="Saldo">
                                    <h:outputText value="#{listaCuentas.cueSaldo}" />
                                </p:column>

                                <p:column headerText="Estado">
                                    <h:outputText value="#{listaCuentas.cueActiva}" />
                                </p:column>

                            </p:dataTable>

                        </p:panel>  




                        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
                            <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                            <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                        </p:confirmDialog>


                    </h:form>  
                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
</html>

